<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<!-- 编辑 -->
	<view class="edit-box">
		<text class="title w100">{{btnText}}</text>

		<view class="edit-item-box w100">
			<view class="edit-item flex-row-center">
				<text class="edit-name">名称</text>
				<view class="edit-content">
					<up-input border="none" inputAlign="right" placeholderClass="placeholderClass" fontSize="26rpx"
						color="#B9BABB" placeholder="请输入昵称" v-model="clerkInfo.name"></up-input>
				</view>
			</view>
			<view class="edit-item flex-row-center">
				<text class="edit-name">联系方式</text>
				<view class="edit-content">
					<up-input border="none" type="number" inputAlign="right" maxlength="11"
						placeholderClass="placeholderClass" fontSize="26rpx" color="#B9BABB" placeholder="请输入联系方式"
						v-model="clerkInfo.mobile"></up-input>
				</view>
			</view>
			<view class="edit-item flex-row-center" v-if="btnText=='添加店员'">
				<text class="edit-name">验证码</text>
				<view class="edit-content">
					<up-input border="none" type="number" inputAlign="right" maxlength="11"
						placeholderClass="placeholderClass" fontSize="26rpx" color="#B9BABB" placeholder="请输入验证码"
						v-model="clerkInfo.code">
						<template #suffix>
							<view class="suffix-box flex-center">
								<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
								<view class="getCode-btn flex-center" @click="getCode">
									<text class="text">{{codeTips}}</text>
								</view>
							</view>
						</template></up-input>
				</view>
			</view>
			<view class="edit-item flex-row-center">
				<text class="edit-name">发布门店组队权限</text>
				<view class="edit-content">
					<up-switch :activeValue="1" :inactiveValue="0" v-model="clerkInfo.is_group"
						activeColor="#60D4C1"></up-switch>
				</view>
			</view>
			<view class="edit-item flex-row-center">
				<text class="edit-name">核销权限</text>
				<view class="edit-content">
					<up-switch :activeValue="1" :inactiveValue="0" v-model="clerkInfo.is_write"
						activeColor="#60D4C1"></up-switch>
				</view>
			</view>
			<view class="edit-item flex-row-center">
				<text class="edit-name">是否助教</text>
				<view class="edit-content">
					<up-switch :activeValue="1" :inactiveValue="0" v-model="clerkInfo.is_assistant"
						activeColor="#60D4C1"></up-switch>
				</view>
			</view>
			<template v-if="clerkInfo.is_assistant==1">
				<view class="edit-item flex-row-center">
					<text class="edit-name">助教等级</text>
					<view class="edit-content flex-row-center" style="justify-content: flex-end;"
						@click="()=>addAssistantShow=true">
						<up-input border="none" inputAlign="right" disabled placeholderClass="placeholderClass"
							:customStyle="{
							backgroundColor: 'transparent'
						}" fontSize="26rpx" color="#DEDEDE" placeholder="请输入内容" v-model="clerkInfo.levelName"></up-input>
						<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
					</view>
				</view>
	<!-- 			<view class="edit-item flex-row-center">
					<text class="edit-name">助教接单地址</text>
					<view class="edit-content">
						<up-input border="none" inputAlign="right" disabled placeholderClass="placeholderClass"
							:customStyle="{
							background:'transparent'
						}" fontSize="26rpx" color="#DEDEDE" placeholder="请输入内容" v-model="clerkInfo.address">
							<template #suffix>
								<up-icon @click="chooseLocationTap" name="map-fill" color="#DEDEDE"
									size="42rpx"></up-icon>
							</template>
						</up-input>
					</view>
				</view> -->
			</template>


		</view>
		<view class="edit-btn">
			<up-button type="primary" :loading="clerkInfo.loading" loadingText="提交中" :customStyle="{
					height:'68rpx',
					fontWeight: 'bold',
					fontSize: '34rpx',
					color: '#0A534F',
					margin:0
				}" @click="submitClick" color="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" shape="circle"
				text="确认提交"></up-button>
		</view>
	</view>
	<up-popup :show="addAssistantShow" @close="closeAssistant" round="16rpx" closeable mode="bottom"
		:closeOnClickOverlay="false" :safeAreaInsetBottom="true">
		<view class="addAssistant-pop flex-row-center">
			<text class="title w100">选择助教等级</text>
			<view class="level-box w100">
				<scroll-view scroll-y="true" style="height: 100%;width: 100%;">
					<view class="level-item flex-row-center" v-for="(item,index) in levelInfo.value" :key="index"
						@click="changeLevel(item)">
						<view class="personnel-left">
							<view class="radio-box-active flex-center" v-if="item.vl_id==clerkInfo.level">
								<up-icon name="checkbox-mark" color="#0A534F" size="28rpx"></up-icon>
							</view>
							<view class="radio-box" v-else></view>
						</view>
						<view class="level-content flex-row-center">
							<view class="flex-row-center">
								<image :src="item.vip_icon" mode="" class="icon"></image>
								<text class="name">{{item.vip_name}}</text>
							</view>
							<text class="price">￥{{item.assistant_price}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	const props = defineProps({
		storeId: {
			default: 0
		},
		clerkInfo: {
			default: {}
		}
	});
	const userStore = userInfoStore();
	const levelInfo = ref(computed(() => userStore.level_info))
	const emit = defineEmits(['closeAddShow']);
	import {
		validateForm
	} from "@/utils/utools.js";
	const rules = {
		name: {
			required: true,
			msg: '请填写店员名称'
		},
		mobile: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
	};
	const addAssistantShow = ref(false);
	const codeTips = ref('获取验证码');
	const clerkId = ref(null);
	const value = ref(true);
	const uCodeRef = ref(null);
	const btnText = ref('添加店员');
	const clerkInfo = reactive({
		id: 0,
		storeId: props.storeId || 0,
		name: '',
		mobile: '',
		code: '',
		is_group: 0,
		is_write: 0,
		is_assistant: 0,
		levelName: '',
		level: 0,
		loading: false,
		address: '',
		lat: 0,
		lng: 0
	});
	const submitClick = () => {
		if (props.clerkInfo) {
			alterClerk();
		} else {
			submitClerk();
		}
	};
	const closeAssistant = () => {
		addAssistantShow.value = false;
	}
	const changeLevel = (item) => {
		clerkInfo.level = item.vl_id;
		clerkInfo.levelName = item.vip_name;
		addAssistantShow.value = false;
	}
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(clerkInfo.mobile)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: clerkInfo.mobile,
				event: 'employee'
			});
			if (res.code == '1') {
				setTimeout(() => {
					uni.hideLoading()
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading()
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const codeChange = (text) => { //code提示切换
		codeTips.value = text;
	};
	const submitClerk = async () => { //添加
		if (clerkInfo.loading) return;
		const validate = validateForm(clerkInfo, {
			...rules,
			code: {
				required: true,
				msg: '请填写验证码'
			},
		}); //验证
		if (!validate.status) return
		if (clerkInfo.is_assistant == 1) {
			// if(!clerkInfo.address){
			// 	uni.$u.toast('请选择助教接单地址');
			// 	return
			// }
			if(!clerkInfo.level){
				uni.$u.toast('请选择助教等级');
				return
			}
		}
		clerkInfo.loading = true;
		const res = await $Api.store.addClerk({
			store_id: clerkInfo.storeId,
			mobile: clerkInfo.mobile,
			real_name: clerkInfo.name,
			is_group: clerkInfo.is_group,
			is_write: clerkInfo.is_write,
			captcha: clerkInfo.code,
			is_assistant: clerkInfo.is_assistant,
			level: clerkInfo.level,
			// lat: clerkInfo.lat || 0,
			// lng: clerkInfo.lng || 0,
			// address: clerkInfo.address || ''
		})
		if (res.code === 1) {
			uni.showToast({
				title: '添加成功'
			});
			setTimeout(() => {
				clerkInfo.loading = false;
				clerkInfo.code = "";
				restClerkInfo();
				emit('closeAddShow', 1);
			}, 600)
		} else {
			clerkInfo.loading = false;
			uni.$u.toast(res.msg);
		}
	}
	const chooseLocationTap = async () => { //选择地理位置
		uni.showLoading({
			title: '加载中'
		})
		chooseLocation(clerkInfo.lat, clerkInfo.lng, true).then((res) => {
			uni.hideLoading();
			if (res) {
				clerkInfo.address = res.address + (res.name ? res.name : '');
				clerkInfo.lat = res.latitude;
				clerkInfo.lng = res.longitude;
			}
		}).catch(() => {
			uni.hideLoading();
			uni.$u.toast('获取位置失败');
		})
	}
	const alterClerk = async () => { //编辑
		if (clerkInfo.loading) return;
		const validate = validateForm(clerkInfo, rules); //验证
		if (!validate.status) return
		if (clerkInfo.is_assistant == 1 && !clerkInfo.level) {
			uni.$u - toast('请选择助教等级');
			return
		}
		clerkInfo.loading = true;
		const res = await $Api.store.alterClerk({
			store_id: clerkInfo.storeId,
			mobile: clerkInfo.mobile,
			real_name: clerkInfo.name,
			is_group: clerkInfo.is_group,
			is_write: clerkInfo.is_write,
			id: clerkInfo.id,
			is_assistant: clerkInfo.is_assistant,
			level: clerkInfo.level,
			// lat: clerkInfo.lat || 0,
			// lng: clerkInfo.lng || 0,
			// address: clerkInfo.address || ''
		})
		if (res.code === 1) {
			uni.showToast({
				title: '修改成功'
			})
			setTimeout(() => {
				clerkInfo.loading = false;
				restClerkInfo()
				emit('closeAddShow', 1);
			}, 600)
		} else {
			clerkInfo.loading = false;
			uni.$u.toast(res.msg);
		}
	}
	const restClerkInfo = () => { //清空表单
		// clerkInfo.storeId = 0;
		clerkInfo.mobile = '';
		clerkInfo.name = '';
		clerkInfo.is_group = 0;
		clerkInfo.is_write = 0;
		clerkInfo.code = '';
		clerkInfo.levelName = '';
		clerkInfo.level = 0;
	}
	watch(() => props.storeId, () => {
		clerkInfo.storeId = props.storeId;
	});
	watch(() => props.clerkInfo, (newVal) => {
		if (newVal) {
			clerkInfo.storeId = newVal.store_id;
			clerkInfo.id = newVal.id;
			btnText.value = '修改店员';
			clerkInfo.mobile = newVal.semobile;
			clerkInfo.name = newVal.sereal_name;
			clerkInfo.is_group = newVal.is_group;
			clerkInfo.is_write = newVal.is_write;
			clerkInfo.address = newVal.address;
			clerkInfo.lat = newVal.lat;
			clerkInfo.lng = newVal.lng;
			clerkInfo.level = newVal.level;
			clerkInfo.is_assistant = newVal.assistant_id ? 1 : 0;
			let info = levelInfo.value.value.find((val) => newVal.level == val.vl_id)
			if (info) {
				clerkInfo.levelName = info.vip_name;
			}
		} else {
			restClerkInfo();
			btnText.value = '添加店员'
		}
	})
</script>


<style lang="scss" scoped>
	.edit-box {
		width: 100%;
		box-sizing: border-box;
		background-color: $page-bg-color;
		padding: 18rpx 14rpx;
		padding-top: 32rpx;
		border-radius: 18rpx 18rpx 0 0;

		.title {
			display: block;
			text-align: center;
			margin-bottom: 32rpx;
			color: $name-color;
			font-size: 32rpx;
			font-weight: bold;
		}

		.edit-item-box {
			background-color: #222528;
			border-radius: 18rpx;
			padding: 0 18rpx;
		}

		.edit-item {
			justify-content: space-between;
			min-height: 104rpx;
			padding: 18rpx 0;
			box-sizing: border-box;

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

			&:not(:last-child) {
				border-bottom: 1rpx solid #666;
			}

			.edit-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #CACBCB;
			}

			.ava {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}
		}

		.edit-content {}

		.edit-btn {
			margin: 0 auto;
			margin-top: 120rpx;
			width: 320rpx;
		}
	}

	.getCode-btn {
		padding-left: 18rpx;
		border-left: 2rpx solid #4D4D4D;
		font-weight: 500;
		font-size: 24rpx;
		color: #66B7AF;
	}

	.addAssistant-pop {
		// width: 600rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx 20rpx;
		background-color: $page-bg-color;
		border-radius: 16rpx 0;
		flex-direction: column;

		.title {
			display: block;
			text-align: center;
			line-height: 48rpx;
			color: $name-color;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;

		}

		.radio-box {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 1rpx solid #ccc;
			margin-right: 18rpx;
			box-sizing: border-box;
		}

		.radio-box-active {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background-color: #7EDE9E;
			margin-right: 18rpx;
		}

		.level-box {
			height: 420rpx;

			.level-item {
				margin-bottom: 16rpx;
			}

			.level-content {
				flex: 1;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 12rpx;
				justify-content: space-between;
				border: 1rpx solid #666;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				.name {
					color: $name-color;
					font-size: 28rpx;
					font-weight: bold;
				}

				.price {
					color: $price-color;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}
</style>